<template>
    <div class="editordefault" />
</template>
<script>
import * as monaco from 'monaco-editor'

var nanoAssign_common = function(obj) {
  var arguments$1 = arguments

  for (var i = 1; i < arguments.length; i++) {
    // eslint-disable-next-line guard-for-in, prefer-rest-params
    for (var p in arguments[i]) {
      obj[p] = arguments$1[i][p]
    }
  }
  return obj
}

export default {
  name: 'MonacoEditor',
  model: {
    event: 'change'
  },
  props: {
    original: String,
    value: {
      type: String,
      required: true
    },
    theme: {
      type: String,
      default: 'vs-dark'
    },
    language: String,
    options: Object,
    diffEditor: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    options: {
      deep: true,
      handler: function handler(options) {
        if (this.editor) {
          var editor = this.getModifiedEditor()
          editor.updateOptions(options)
        }
      }
    },
    value: function value(newValue) {
      if (this.editor) {
        var editor = this.getModifiedEditor()

        if (newValue !== editor.getValue()) {
          editor.setValue(newValue)
        }
      }
    },
    original: function original(newValue) {
      if (this.editor && this.diffEditor) {
        var editor = this.getOriginalEditor()

        if (newValue !== editor.getValue()) {
          editor.setValue(newValue)
        }
      }
    },
    language: function language(newVal) {
      if (this.editor) {
        var editor = this.getModifiedEditor()
        this.monaco.editor.setModelLanguage(editor.getModel(), newVal)
      }
    },
    theme: function theme(newVal) {
      if (this.editor) {
        this.monaco.editor.setTheme(newVal)
      }
    }
  },
  mounted: function mounted() {
    var _this = this

    //   this.clientHeight.height = `${document.documentElement.clientHeight}px`;
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
    const that = this

    window.addEventListener('resize', this.layout, false)

    // ESM format so it can't be resolved by commonjs `require` in eslint
    // eslint-disable-next-line import/no-unresolved
    // var monaco = import('monaco-editor')

    //   (async() => {
    //     this.monaco = await import('monaco-editor')
    //     this.$nextTick(function() {
    //       _this.initMonaco(this.monaco)
    //     })
    //   })()

    this.monaco = monaco
    this.$nextTick(function() {
      _this.initMonaco(this.monaco)
    })
  },
  beforeDestroy: function beforeDestroy() {
    this.editor && this.editor.dispose()
    window.removeEventListener('resize', this.layout, false)
  },
  methods: {
    layout() {
      this.editor.layout()
      console.log('resize')
    },
    initMonaco: function initMonaco(monaco) {
      var _this2 = this

      this.$emit('editorWillMount', this.monaco)
      var options = nanoAssign_common(
        {
          value: this.value,
          theme: this.theme,
          language: this.language
        },
        this.options
      )

      if (this.diffEditor) {
        this.editor = monaco.editor.createDiffEditor(this.$el, options)
        var originalModel = monaco.editor.createModel(this.original, this.language)
        var modifiedModel = monaco.editor.createModel(this.value, this.language)
        this.editor.setModel({
          original: originalModel,
          modified: modifiedModel
        })
      } else {
        this.editor = monaco.editor.create(this.$el, options)
      } // @event `change`

      var editor = this.getModifiedEditor()
      editor.onDidChangeModelContent(function(event) {
        var value = editor.getValue()

        if (_this2.value !== value) {
          _this2.$emit('change', value, event)
        }
      })
      //   addCommand无效
      //   editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_Q, function() {
      //     console.log('SAVE pressed!')
      //   })

      editor.addAction({
        id: 'saveDocToServer',
        label: '保存至服务器',
        keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run: function(editor) {
          _this2.$emit('saveDocToServer', null)
        }
      })
      this.$emit('editorDidMount', this.editor)
    },

    /** @deprecated */
    getMonaco: function getMonaco() {
      return this.editor
    },
    getEditor: function getEditor() {
      return this.editor
    },
    getModifiedEditor: function getModifiedEditor() {
      return this.diffEditor ? this.editor.getModifiedEditor() : this.editor
    },
    getOriginalEditor: function getOriginalEditor() {
      return this.diffEditor ? this.editor.getOriginalEditor() : this.editor
    },
    focus: function focus() {
      this.editor.focus()
    }
  }
}
</script>

<style>
.editordefault {
    width: 100%;
    height: 100%;
}
</style>
